import React from 'react'
import { PieChart } from 'components/Charts'
import style from './gateway.scss'

class Gateway extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      info: {},
    }
  }

  componentDidMount() {
    request
      .get(
        '/kapis/clusters/host/monitoring.kubesphere.io/v1alpha3/namespaces/project/ingresses?duration=12h&namespace=project&job=kubesphere-router-project-metrics&metrics_filter=ingress_request_count%7Cingress_request_5xx_count%7Cingress_request_4xx_count%7Cingress_active_connections%7Cingress_success_rate%7Cingress_request_duration_average%7Cingress_request_duration_50percentage%7Cingress_request_duration_95percentage%7Cingress_request_duration_99percentage%24&time=1672371757'
      )
      .then(res => {
        const { results } = res
        const info = {}
        info['4xx'] = Number(
          results.find(i => i.metric_name === 'ingress_request_4xx_count')?.data
            ?.result?.[0]?.value[1] || 0
        )

        info['5xx'] = Number(
          results.find(i => i.metric_name === 'ingress_request_5xx_count').data
            ?.result?.[0]?.value?.[1] || 0
        )

        // 连接次数
        info['connectNum'] = Number(
          results.find(i => i.metric_name === 'ingress_request_count').data
            ?.result?.[0]?.value?.[1] || 0
        )
        this.setState({ info })
      })
  }

  render() {
    const { info } = this.state
    return (
      <div className={style.content}>
        <div className="middle">
          <PieChart
            width={155}
            height={155}
            dataKey="value"
            innerRadius={'72%'}
            outerRadius={'90%'}
            data={[
              {
                name: '1',
                itemStyle: {
                  fill: '#317df9',
                },
                value: info.connectNum || 100,
              },
              {
                name: '2',
                itemStyle: {
                  fill: '#f6f7fb',
                },
                value: info['4xx'] || 0 + info['5xx'] || 0 || 0,
              },
            ]}
          />
          <div className="text">
            <p>成功请求</p>
            <p className="value">
              {Math.floor(
                (info['4xx'] || 0 + info['5xx'] || 0 / info.connectNum) * 100 ||
                  100
              )}
              %
            </p>
          </div>
        </div>
        <div className="left">
          <div className="card">
            <img src={'/assets/new/all.png'} />
            <div>
              <p>总请求数量</p>
              <p className="num">{info.connectNum || 0}</p>
            </div>
          </div>
          <div className="card">
            <img src={'/assets/new/failed.png'} />
            <div>
              <p>4xx请求数量</p>
              <p className="num">{info['4xx'] || 0}</p>
            </div>
            <div>
              <p>5xx请求数量</p>
              <p className="num">{info['5xx'] || 0}</p>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Gateway
